<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="产品名称" prop="productName">
                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="所属机构" prop="belongInstitutionName">
                <el-input v-model="queryParams.belongInstitutionName" placeholder="请输入所属机构" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="主担保方式" label-width="100px" prop="mainGuaranteeWay">
                <el-select class="w-40" v-model="queryParams.mainGuaranteeWay" placeholder="请选择担保方式" clearable>
                    <el-option v-for="dict in productMainGuaranteeType" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="申请时间" style="width: 308px" prop="applyTimeRange">
                <el-date-picker v-model="queryParams.applyTimeRange" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="审核时间" style="width: 308px" prop="auditTimeRange">
                <el-date-picker v-model="queryParams.auditTimeRange" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['manage:jrcp:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['manage:jrcp:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['manage:jrcp:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['manage:jrcp:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-tabs v-model="queryParams.auditStatus" @tab-change="handleTabChange">
            <el-tab-pane label="全部" name="">
            </el-tab-pane>
            <el-tab-pane v-for="dict in auditStatus" :key="dict.value" :label="dict.label" :name="dict.value">
            </el-tab-pane>
        </el-tabs>
        <el-table v-loading="loading" border :data="jrcpList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="产品编号" width="180" show-overflow-tooptip align="center" prop="productSerialNumber" />
            <el-table-column label="Logo" align="center" prop="orgLogo" width="80">
                <template #default="scope">
                    <image-preview :src="scope.row.orgLogo" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="产品名称" width="150" align="center" prop="productName" />
            <el-table-column label="所属机构" width="180" show-overflow-tooptip align="center"
                prop="belongInstitutionName" />
            <el-table-column label="主担保方式" width="120" align="center" prop="mainGuaranteeWay">
                <template #default="scope">
                    <dict-tag :options="productMainGuaranteeType" :value="scope.row.mainGuaranteeWay" />
                </template>
            </el-table-column>

            <el-table-column label="二级担保方式" width="120" align="center" prop="secondGuaranteeWay">
                <template #default="scope">
                    <dict-tag :options="productSecondGuaranteeWay" :value="scope.row.secondGuaranteeWay" />
                </template>
            </el-table-column>

            <!-- <el-table-column label="最低贷款额度" align="center" prop="amountLimitLower" /> -->
            <!-- <el-table-column label="最高贷款额度" align="center" prop="amountLimitUpper" /> -->
            <el-table-column label="额度范围(万)" width="130" align="center">
                <template #default="scope">
                    <span>{{ `${scope.row.amountLimitLower}~${scope.row.amountLimitUpper}` }}</span>
                </template>
            </el-table-column>
            <el-table-column label="贷款期限(月)" width="120" align="center" prop="loanTerm">
                <template #default="scope">
                    <span>{{ `${scope.row.loanPeriodLimitLower}-${scope.row.loanPeriodLimitUpper}` }}</span>
                </template>
            </el-table-column>
            <el-table-column label="参考年利率(%)" width="120" align="center">
                <template #default="scope">
                    <span>{{ `${scope.row.interestRateLimitLower}-${scope.row.interestRateLimitUpper}` }}</span>
                </template>
            </el-table-column>
            <el-table-column label="还款方式" show-overflow-tooptip width="120" align="center" prop="repaymentWay">
                <template #default="scope">
                    <dict-tag :options="repaymentType" :value="scope.row.repaymentWay" />
                </template>
            </el-table-column>
            <el-table-column label="排序" width="120" align="center" prop="sort">
            </el-table-column>
            <el-table-column label="固定推荐" width="120" align="center" prop="fixedRecommend">
                <template #default="scope">
                    <el-switch active-value="1" :key="scope.row.id"
                        @change="updateState({ id: scope.row.id, fixedRecommend: scope.row.fixedRecommend })"
                        inactive-value="0" v-model="scope.row.fixedRecommend" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>
            <el-table-column label="首页推荐" width="120" align="center" prop="homeRecommend">
                <template #default="scope">
                    <el-switch active-value="1" :key="scope.row.id"
                        @change="updateState({ id: scope.row.id, homeRecommend: scope.row.homeRecommend })"
                        inactive-value="0" v-model="scope.row.homeRecommend" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>
            <el-table-column label="超市置顶" width="120" align="center" prop="marketTop">
                <template #default="scope">
                    <el-switch active-value="1" :key="scope.row.id"
                        @change="updateState({ id: scope.row.id, marketTop: scope.row.marketTop })" inactive-value="0"
                        v-model="scope.row.marketTop" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>
            <el-table-column label="利率显示" width="120" align="center" prop="interestRateShow">
                <template #default="scope">
                    <el-switch :key="scope.row.id" active-value="1"
                        @change="updateState({ id: scope.row.id, interestRateShow: scope.row.interestRateShow })"
                        inactive-value="0" v-model="scope.row.interestRateShow" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>
            <el-table-column label="状态" width="120" align="center" prop="enabled">
                <template #default="scope">
                    <el-switch active-value="1" :key="scope.row.id"
                        @change="updateState({ id: scope.row.id, enabled: scope.row.enabled })" inactive-value="0"
                        v-model="scope.row.enabled" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>
            <el-table-column label="审核状态" prop="auditStatus" width="100" align="center">
                <template #default="scope">
                    <dict-tag :options="auditStatus" :value="scope.row.auditStatus" />
                </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="createTime" align="center" width="100"></el-table-column>
            <el-table-column label="申请人" prop="createBy" align="center"></el-table-column>
            <el-table-column label="申请人来源" prop="publishSource" width="90" align="center">
                <template #default="scope">
                    <dict-tag :options="productApplySource" :value="scope.row.publishSource" />
                </template>
            </el-table-column>
            <el-table-column label="审核人" prop="auditor" align="center"></el-table-column>
            <el-table-column label="审核时间" prop="auditTime" width="100" align="center"></el-table-column>
            <el-table-column label="操作" width="200" fixed="right" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" v-if="scope.row.auditStatus === '0'" icon="document"
                        @click="handleAudit(scope.row)">审核</el-button>
                    <el-button link type="primary" v-else icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改金融产品对话框 -->
        <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
            <el-tabs v-model="activeTab">
                <el-tab-pane label="产品基本信息" name="basicInfo">
                    <el-form ref="basicInfoRef" :disabled="formDisabled" :model="form" :rules="rules"
                        label-width="110px">
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label="产品类型" prop="productType">
                                    <el-select v-model="form.productType" placeholder="请选择产品类型" clearable>
                                        <el-option v-for="dict in productType" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="产品名称" prop="productName">
                                    <el-input v-model="form.productName" placeholder="请输入产品名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="产品简称" prop="productShortName">
                                    <el-input v-model="form.productShortName" placeholder="请输入产品简称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属金融机构" prop="belongInstitution">
                                    <el-autocomplete v-model="form.belongInstitutionName" class="w-full"
                                        value-key="orgName" @select="handleSelectOrg" :fetch-suggestions="querySearch"
                                        clearable placeholder="请输入机构名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="主担保方式" prop="mainGuaranteeWay">
                                    <el-select v-model="form.mainGuaranteeWay" placeholder="请选择主担保方式" clearable>
                                        <el-option v-for="dict in productMainGuaranteeType" :key="dict.value"
                                            :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="二级担保方式" prop="secondGuaranteeWay">
                                    <el-select v-model="form.secondGuaranteeWay" placeholder="请选择二级担保方式" clearable>
                                        <el-option v-for="dict in productSecondGuaranteeWay" :key="dict.value"
                                            :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="审批模式" prop="auditMode">
                                    <el-select v-model="form.auditMode" placeholder="请选择审批模式" clearable>
                                        <el-option v-for="dict in productApproveMode" :key="dict.value"
                                            :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="线上地址类型" prop="onlineAddressType">
                                    <el-radio-group v-model="form.onlineAddressType">
                                        <el-radio v-for="(item, index) in productOnlineAddressType"
                                            :value="item.label">{{
                                                item.label
                                            }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="线上地址" prop="onlineAddressUrl">
                                    <el-input v-if="form.onlineAddressType === '链接地址'" v-model="form.onlineAddressUrl"
                                        placeholder="请输入线上地址" />
                                    <div v-else class="flex gap-3">
                                        <el-upload class="upload-demo" :show-file-list="false"
                                            :action="`${VITE_APP_BASE_URL}/common/upload`"
                                            :headers="{ 'Authorization': 'Bearer ' + getToken() }" :limit="1"
                                            :on-success="(res) => form.onlineAddressUrl = res.url">
                                            <el-button type="primary">点击上传</el-button>
                                        </el-upload>
                                        <el-button type="primary" @click="previewImg">查看图片</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="额度范围(万)" prop="amountLimitLower">
                                    <el-input v-model="form.amountLimitLower" placeholder="最低额度" style="width: 45%" />
                                    <span style="display: inline-block; width: 10%; text-align: center">~</span>
                                    <el-input v-model="form.amountLimitUpper" placeholder="最高额度" style="width: 45%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="利率范围(%)" prop="interestRateLimitLower">
                                    <el-input v-model="form.interestRateLimitLower" placeholder="最低利率"
                                        style="width: 45%" />
                                    <span style="display: inline-block; width: 10%; text-align: center">~</span>
                                    <el-input v-model="form.interestRateLimitUpper" placeholder="最高利率"
                                        style="width: 45%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="显示利率" prop="interestRateShow">
                                    <el-switch v-model="form.interestRateShow" active-value="1" inactive-value="0" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="贷款期限(月)" prop="loanPeriodLimitLower">
                                    <el-input v-model="form.loanPeriodLimitLower" placeholder="最短期限"
                                        style="width: 45%" />
                                    <span style="display: inline-block; width: 10%; text-align: center">-</span>
                                    <el-input v-model="form.loanPeriodLimitUpper" placeholder="最长期限"
                                        style="width: 45%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="还款方式" prop="repaymentWay">
                                    <el-select v-model="form.repaymentWay" placeholder="请选择还款方式" clearable>
                                        <el-option v-for="dict in repaymentType" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="排序" prop="sort">
                                    <el-input-number v-model="form.sort" placeholder="请输入排序值" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="适用区域" prop="scope">
                                    <el-radio-group v-model="form.scope">
                                        <el-radio value="all">全国</el-radio>
                                        <el-radio value="select">选择区域</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col v-show="form.scope === 'select'" :span="24">
                                <el-form-item label="选择覆盖范围" prop="serviceArea">
                                    <el-input class="w-9/10" v-model="form.serviceArea">
                                        <template #append>
                                            <el-button @click="areaVisbled = true" type="primary">选择区域</el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="所属行业" prop="industry">
                                    <el-cascader ref="cascaderRef" @change="handleIndustryChange" class="w-9/10"
                                        v-model="form.industry" checkOnClickNode :show-all-levels="false"
                                        :options="industryOptions"
                                        :props="{ multiple: true, checkStrictly: true, emitPath: false }"
                                        placeholder="请选择所属行业" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="机构logo" prop="orgLogo">
                                    <el-upload class="avatar-uploader" :show-file-list="false"
                                        :action="`${VITE_APP_BASE_URL}/common/upload`"
                                        :headers="{ 'Authorization': 'Bearer ' + getToken() }" :limit="1"
                                        :on-success="(res) => form.orgLogo = res.url">
                                        <img v-if="form.orgLogo" :src="form.orgLogo" class="avatar-uploader-icon" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="预审材料" prop="inquiryMaterials">
                                    <el-checkbox-group v-model="form.inquiryMaterials">
                                        <el-checkbox value="企业营业执照">企业营业执照</el-checkbox>
                                        <el-checkbox value="企业经营情况">企业经营情况</el-checkbox>
                                        <el-checkbox value="贷款用途资料">贷款用途资料</el-checkbox>
                                        <el-checkbox value="中标通知书">中标通知书</el-checkbox>
                                        <el-checkbox value="房产证">房产证</el-checkbox>
                                        <el-checkbox value="法人及经办人身份证">法人及经办人身份证</el-checkbox>
                                        <el-checkbox value="6个月税务局纳税申报的开票数据">6个月税务局纳税申报的开票数据</el-checkbox>
                                        <el-checkbox value="户口本">户口本</el-checkbox>
                                        <el-checkbox value="企业人行征信报告">企业人行征信报告</el-checkbox>
                                        <el-checkbox value="企业银行账户">企业银行账户</el-checkbox>
                                        <el-checkbox value="企业基本信息">企业基本信息</el-checkbox>
                                        <el-checkbox value="公司章程">公司章程</el-checkbox>
                                        <el-checkbox value="验资报告">验资报告</el-checkbox>
                                        <el-checkbox value="主要供销客户的销购合同/协议">主要供销客户的销购合同/协议</el-checkbox>
                                        <el-checkbox value="法定代表人(实际控制人)婚姻状况">法定代表人(实际控制人)婚姻状况</el-checkbox>
                                        <el-checkbox value="法定代表人(实际控制人)人行征信报告">法定代表人(实际控制人)人行征信报告</el-checkbox>
                                        <el-checkbox value="企业纳税信息">企业纳税信息</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="产品补充信息" name="extendInfo">
                    <el-form class="pr-7 mt-5" ref="extendInfoRef" :disabled="formDisabled" :model="form.extendInfo"
                        :rules="rules" label-width="110px">
                        <el-form-item label="产品简介" prop="productDescription">
                            <!-- <el-input input-style="height: 100px;" type="textarea"
                                v-model="form.extendInfo.productDescription" :maxlength="1000" show-word-limit
                                placeholder="请输入产品描述" /> -->
                            <editor class="!w-full" v-model="form.extendInfo.productDescription" :min-height="192" />
                        </el-form-item>
                        <el-form-item label="产品特点" prop="productFeature">
                            <el-input input-style="height: 100px;" type="textarea"
                                v-model="form.extendInfo.productFeature" :maxlength="1000" show-word-limit
                                placeholder="请输入产品特点" />
                        </el-form-item>
                        <el-form-item label="适用群体" prop="productSuitPopulation">
                            <el-input input-style="height: 100px;" type="textarea"
                                v-model="form.extendInfo.productSuitPopulation" :maxlength="1000" show-word-limit
                                placeholder="请输入适用群体" />
                        </el-form-item>
                        <el-form-item label="特此声明" prop="declaration">
                            <el-input input-style="height: 100px;" type="textarea" v-model="form.extendInfo.declaration"
                                :maxlength="1000" show-word-limit placeholder="请输入特此声明" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="产品补准入要求" name="accessStandard">
                    <el-form ref="accessStandardRef" :disabled="formDisabled" :model="form.accessStandard"
                        :rules="rules" label-width="140px">
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label="经营时间大于（月）" prop="operationTimeLimitLower">
                                    <el-input v-model="form.accessStandard.operationTimeLimitLower"
                                        placeholder="请输入经营时间" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="个体工商户" prop="selfEmployLimit">
                                    <el-select clearable v-model="form.accessStandard.selfEmployLimit"
                                        placeholder="请选择">
                                        <el-option label="禁止申请" :value="0" />
                                        <el-option label="允许申请" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="小微企业" prop="microEnterpriseLimit">
                                    <el-select clearable v-model="form.accessStandard.microEnterpriseLimit"
                                        placeholder="请选择">
                                        <el-option label="禁止申请" :value="0" />
                                        <el-option label="允许申请" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label="注册资本大于（万）" prop="registerFundLimitLower">
                                    <el-input v-model="form.accessStandard.registerFundLimitLower"
                                        placeholder="请输入注册资本" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="上年度纳税额（万）" prop="preYearPayTaxAmount">
                                    <el-input v-model="form.accessStandard.preYearPayTaxAmount"
                                        placeholder="请输入上年度纳税额" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="纳税等级要求" prop="payTaxGrade">
                                    <el-select v-model="form.accessStandard.payTaxGrade" placeholder="请选择纳税等级"
                                        clearable>
                                        <el-option v-for="item in ratepayingLevel" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label-width="auto" label="企业持续纳税年限(年)" prop="payTaxDuration">
                                    <el-input v-model="form.accessStandard.payTaxDuration" placeholder="请输入持续纳税年限" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="当前贷款余额小于(万)" label-width="auto" prop="loanRemainAmount">
                                    <el-input v-model="form.accessStandard.loanRemainAmount" placeholder="请输入当前贷款余额" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label-width="160px" label="企业主年龄要求（岁）" prop="ownerAge">
                                    <el-input class="w-25" v-model="form.accessStandard.ageLimitLower"
                                        placeholder="请输入" />
                                    <span class="mx-2">~</span>
                                    <el-input class="w-25" v-model="form.accessStandard.ageLimitUpper"
                                        placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label-width="auto" label="上年度开票营业收入大于(万)" prop="preYearIncome">
                                    <el-input v-model="form.accessStandard.preYearIncome" placeholder="请输入上年度开票营业收入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label-width="auto" label="企业当前融资银行数量小于(家)" prop="bankNumber">
                                    <el-input v-model="form.accessStandard.bankNumber" placeholder="请输入融资银行数量" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="抵押物要求" prop="guaranteeLimit">
                                    <el-select v-model="form.accessStandard.pawnType" placeholder="请选择抵押物类型" clearable>
                                        <el-option v-for="dict in pawnType" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="auto" label="抵押物、企业注册地与产品服务范围一致" prop="guaranteeAreaLimit">
                                    <el-radio-group v-model="form.accessStandard.guaranteeAreaLimit">
                                        <el-radio :value="1">允许申请</el-radio>
                                        <el-radio :value="0">禁止申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="auto" label="企业注册地与产品服务区域一致" prop="baseAccountNative">

                                    <el-radio-group v-model="form.accessStandard.baseAccountNative">
                                        <el-radio :value="1">允许申请</el-radio>
                                        <el-radio :value="0">禁止申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="auto" label="企业基本户在本行限制" prop="baseAccountInBank">

                                    <el-radio-group v-model="form.accessStandard.baseAccountInBank">
                                        <el-radio :value="1">允许申请</el-radio>
                                        <el-radio :value="0">禁止申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="企业欠税限制" prop="owingTax">

                                    <el-radio-group v-model="form.accessStandard.owingTax">
                                        <el-radio :value="1">允许申请</el-radio>
                                        <el-radio :value="0">禁止申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="auto" label="企业法人服务区域有房限制" prop="housePropertyArea">

                                    <el-radio-group v-model="form.accessStandard.housePropertyArea">
                                        <el-radio :value="1">允许申请</el-radio>
                                        <el-radio :value="0">禁止申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="法人变更限制" prop="legalPersonChangeLimitMonth">
                                    近
                                    <el-select class="w-25 mx-1"
                                        v-model="form.accessStandard.legalPersonChangeLimitMonth" placeholder="请选择月数">
                                        <el-option label="6" value="6">
                                        </el-option>
                                        <el-option label="12" value="12">
                                        </el-option>
                                        <el-option label="24" value="24">
                                        </el-option>
                                    </el-select>
                                    月，变更小于等于
                                    <el-input class="w-25 mx-1"
                                        v-model="form.accessStandard.legalPersonChangeLimitNumber"
                                        placeholder="请输入"></el-input>
                                    次
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <template #footer>
                <div class="dialog-footer">
                    <div v-if="option == 'audit'" class="inline-block mr-3">
                        <el-button type="primary" @click="auditApproved">审核通过</el-button>
                        <el-button type="danger" @click="auditReject">审核拒绝</el-button>
                    </div>
                    <el-button type="primary" v-else @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="showImg" title="预览图片" width="500px">
            <el-image class="w-full" :src="form.onlineAddressUrl" fit="contain"></el-image>
        </el-dialog>
        <selectArea @select="handleSelect" v-model="areaVisbled" />
    </div>
</template>

<script setup name="Jrcp">
import { listJrcp, getJrcp, delJrcp, addJrcp, updateJrcp, updateBaseInfo } from "@/api/manage/jrcp"
import { listOrganization } from "@/api/manage/organization"
import selectArea from "@/components/selectArea"
import { onMounted, ref } from "vue"
const { proxy } = getCurrentInstance()
import { getToken } from "@/utils/auth"
const { productMainGuaranteeType, repaymentType, productOnlineAddressType, ratepayingLevel, productType, pawnType, auditStatus, productApproveMode, productSecondGuaranteeWay, productApplySource } = proxy.useDict('productOnlineAddressType', 'productApplySource', 'productSecondGuaranteeWay', 'productMainGuaranteeType', 'ratepayingLevel', 'productType', 'pawnType', 'auditStatus', 'repaymentType', 'productApproveMode')

const jrcpList = ref([])
const open = ref(false)
const areaVisbled = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const updateState = (row) => {
    updateJrcp(row).then(res => {
        if (res.code === 200) {
            proxy.$message({
                message: "修改成功",
                type: "success"
            })
        }
    })
}

import { getIndustryList } from "@/api/system/industry"
import { cloneDeep } from "lodash-es"
import { auditProduct } from "../../../api/manage/jrcp"
import { unref } from "vue"


const querySearch = (queryString, cb) => {
    if (queryString.length <= 3) {

        return cb([])
    }
    listOrganization({ orgName: queryString }).then(res => {
        if (res.code == 200) {
            cb(res.rows)
        }
    })
}
const showImg = ref(false)
const previewImg = () => {
    showImg.value = true
}
const VITE_APP_BASE_URL = import.meta.env.VITE_APP_BASE_URL



/**表单提交开始 */
// 切换tab方法

const handleSelectOrg = (item) => {
    form.value.belongInstitution = item.orgPath
    // form.value.belongInstitutionName = item.orgName
    form.value.belongInstitutionAreaCode = item.district
    form.value.belongInstitutionType = item.orgType
}

const auditApproved = (type) => {
    const formData = unref(form.value)
    proxy.$modal.confirm('是否确认审核该金融产品？').then(() => {
        auditProduct({ id: formData.id, auditStatus: "1" }).then(res => {
            if (res.code === 200) {
                open.value = false
                getList()
                proxy.$message({
                    message: "审核成功",
                    type: "success"
                })
            }
        })
    }).catch(() => {
        // User canceled the confirmation
    })
}

const auditReject = (type) => {
    const formData = unref(form.value)
    proxy.$modal.prompt('请输入拒绝理由？').then(({value}) => {
        auditProduct({ id: formData.id, auditStatus: "2", rejectReason: value }).then(res => {
            if (res.code === 200) {
                open.value = false
                getList()
                proxy.$message({
                    message: "审核成功",
                    type: "success"
                })
            }
        })
    }).catch(() => {
        // User canceled the confirmation
    })
}

const option = ref("")

const handleAudit = (row) => {
    formDisabled.value = true
    option.value = "audit"
    reset()
    getDetail(row)
}

const title = ref("")
const formDisabled = ref(false)
const activeTab = ref("basicInfo")

const handleTabChange = () => {
    getList()
}

// 选择适用区域
function handleSelect(nodes) {
    form.value.serviceArea = nodes.map(m => m.label).join(',')
    form.value.serviceAreaCode = nodes.map(m => m.regionCode).join(',')

    console.log("serverAreaCode", form.serviceAreaCode);
    console.log("serverArea", form.serviceArea);
    areaVisbled.value = false
}


const data = reactive({
    form: {
        extendInfo: {},
        accessStandard: {},
        industry: [],
        belongInstitutionName: null,
        industries: []
    },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        belongInstitutionName: null,
        auditStatus: "",
        productName: null,
        mainGuaranteeWay: null,
        auditTimeRange: [],
        applyTimeRange: [],
        scope: null,
        publishTime: null,
        auditMode: null
    },
    rules: {
        productName: [
            { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        industry: [
            { required: true, message: "所属行业不能为空", trigger: "change" }
        ],
        inquiryMaterials: [
            { required: true, message: "预审材料不能为空", trigger: "change" }
        ],
        orgLogo: [
            { required: true, message: "机构logo不能为空", trigger: "change" }
        ],
        onlineAddressUrl: [
            { required: true, message: "线上地址不能为空", trigger: "blur" }
        ],
        productDescription: [
            { required: true, message: "产品描述不能为空", trigger: "blur" }
        ],
        productFeature: [
            { required: true, message: "产品特点不能为空", trigger: "blur" }
        ],
        productSuitPopulation: [
            { required: true, message: "适用人群不能为空", trigger: "blur" }
        ],
        declaration: [
            { required: true, message: "特此声明不能为空", trigger: "blur" }
        ],
        productShortName: [
            { required: true, message: "产品简称不能为空", trigger: "blur" }
        ],
        productType: [
            { required: true, message: "产品类型不能为空", trigger: "change" }
        ],
        mainGuaranteeWay: [
            { required: true, message: "担保方式不能为空", trigger: "blur" }
        ],
        secondGuaranteeWay: [
            { required: true, message: "二级担保方式不能为空", trigger: "change" }
        ],
        belongInstitution: [
            { required: true, message: "金融机构不能为空", trigger: "change" }
        ],
        scope: [
            { required: true, message: "适用范围不能为空", trigger: "blur" }
        ],
        auditMode: [
            { required: true, message: "审批模式不能为空", trigger: "blur" }
        ],
        repaymentWay: [
            { required: true, message: "还款方式不能为空", trigger: "blur" }
        ],
        loanPeriodLimitLower: [
            { required: true, message: "贷款期限不能为空", trigger: "blur" },
            {
                validator: (rule, value, callback) => {
                    if (form.value.loanPeriodLimitLower && form.value.loanPeriodLimitUpper) { // 假设field1和field2是你需要检查的两个字段
                        callback(); // 如果两个字段都有值，则通过校验
                    } else {
                        callback(new Error('请填写开始贷款期限和结束贷款期限'));
                    }
                }, trigger: "blur"
            }
        ],
        interestRateLimitLower: [
            { required: true, message: "利率不能为空", trigger: "blur" },
            {
                validator: (rule, value, callback) => {
                    if (form.value.interestRateLimitLower && form.value.interestRateLimitUpper) { // 假设field1和field2是你需要检查的两个字段
                        callback(); // 如果两个字段都有值，则通过校验
                    } else {
                        callback(new Error('请填写开始利率和结束利率'));
                    }
                }, trigger: "blur"
            }
        ],
        amountLimitLower: [
            { required: true, message: "贷款额度不能为空", trigger: "blur" },
            {
                validator: (rule, value, callback) => {
                    if (form.value.amountLimitLower && form.value.amountLimitUpper) { // 假设field1和field2是你需要检查的两个字段
                        callback(); // 如果两个字段都有值，则通过校验
                    } else {
                        callback(new Error('请填写开始贷款额度和结束贷款额度'));
                    }
                }, trigger: "blur"
            }
        ],
    }
})
// 选择行业
function handleIndustryChange() {
    const checkedNodes = cascaderRef.value.getCheckedNodes()
    if (checkedNodes.length > 0) {
        form.value.industries = checkedNodes.map(item => {
            return {
                industryId: item.value,
                industryName: item.label
            }
        })
    }
}

/** 提交按钮 */
function submitForm() {
    // 创建验证 Promise 数组

    proxy.$refs["basicInfoRef"].validate(valid1 => {
        activeTab.value = "basicInfo"
        if (!valid1) {
            // 第一个表单验证失败
            return false;
        }

        activeTab.value = "extendInfo"



        // 第一个表单验证通过，再验证第二个表单
        proxy.$refs["extendInfoRef"].validate(valid2 => {
            activeTab.value = "extendInfo"
            if (!valid2) {
                // 第二个表单验证失败
                return false;
            }

            activeTab.value = "accessStandard"

            // 第二个表单验证通过，再验证第三个表单
            proxy.$refs["accessStandardRef"].validate(valid3 => {
                if (valid3) {

                    const formData = cloneDeep(form.value)
                    formData.inquiryMaterials = formData.inquiryMaterials.join(',')
                    formData.publishSource = "3"
                    // 所有表单验证通过，可以提交数据
                    if (form.value.id) {
                        updateBaseInfo(formData).then(res => {
                            if (res.code === 200) {
                                proxy.$message({
                                    message: "添加成功",
                                    type: "success"
                                })
                                getList()
                                cancel()
                            }
                        })
                    } else {
                        addJrcp(formData).then(res => {
                            if (res.code === 200) {
                                proxy.$message({
                                    message: "修改成功",
                                    type: "success"
                                })
                                getList()
                                cancel()
                            }
                        })
                    }

                }
            });
        });
    });
}

const { queryParams, form, rules } = toRefs(data)
/** 表单提交结尾 */



/** 查询金融产品列表 */
function getList() {
    loading.value = true

    listJrcp(queryParams.value).then(response => {
        jrcpList.value = response.rows
        total.value = response.total
        loading.value = false
    })
}

const cascaderRef = ref(null)



// 取消按钮
function cancel() {
    open.value = false
    reset()
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        productType: null,
        productName: null,
        productShortName: null,
        belongInstitution: null,
        mainGuaranteeWay: null,
        secondGuaranteeWay: null,
        auditMode: null,
        onlineAddressType: null,
        onlineAddressUrl: null,
        amountLimitLower: null,
        amountLimitUpper: null,
        extendInfo: {},
        accessStandard: {},
        interestRateShow: '0',
        loanPeriodLimitLower: null,
        loanPeriodLimitUpper: null,
        repaymentWay: null,
        sort: null,
        scope: null
    }
    proxy.resetForm("jrcpRef")
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef")
    handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
    single.value = selection.length != 1
    multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
    reset()
    option.value = "add"
    open.value = true
    title.value = "添加金融产品"
    formDisabled.value = false
}

function getDetail(row) {
    const _id = row.id || ids.value
    getJrcp(_id).then(response => {
        form.value = response.data
        form.value.scope = !!form.value.serviceArea ? 'select' : 'all'
        form.value.inquiryMaterials = form.value.inquiryMaterials.split(',')
        form.value.industry = form.value.industries.map(m => m.industryId.toString())
        open.value = true
        title.value = "修改金融产品"
    })
}

/** 修改按钮操作 */
function handleUpdate(row) {
    formDisabled.value = false
    option.value = "update"
    reset()
    getDetail(row)
}



/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value
    proxy.$modal.confirm('是否确认删除金融产品编号为"' + _ids + '"的数据项？').then(function () {
        return delJrcp(_ids)
    }).then(() => {
        getList()
        proxy.$modal.msgSuccess("删除成功")
    }).catch(() => { })
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('manage/jrcp/export', {
        ...queryParams.value
    }, `jrcp_${new Date().getTime()}.xlsx`)
}
const industryOptions = ref([])
onMounted(() => {
    getList()
    getIndustryList().then(res => {
        if (res.code === 200) {
            industryOptions.value = res.data
        }
    })


})
</script>
<style lang="scss" scoped>
:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 78px;
    text-align: center;
}
</style>
